<template>
  <div class="todo-filter">
    <div class="filter-buttons">
      <button
        v-for="filterOption in filterOptions"
        :key="filterOption.value"
        @click="$emit('set-filter', filterOption.value)"
        :class="['filter-btn', { active: filter === filterOption.value }]"
      >
        {{ filterOption.label }}
      </button>
    </div>

    <div class="filter-actions">
      <button v-if="completedCount > 0" @click="$emit('clear-completed')" class="clear-btn">
        清除已完成
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTodo } from '@/composables/useTodo'

const filterOptions = [
  { value: 'all', label: '全部' },
  { value: 'active', label: '进行中' },
  { value: 'completed', label: '已完成' },
]
const { completedCount, filter } = useTodo()
</script>

<style scoped>
.todo-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.filter-buttons {
  display: flex;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn:hover {
  background: #e9ecef;
}

.filter-btn.active {
  background: #3498db;
  color: white;
  border-color: #3498db;
}

.clear-btn {
  padding: 0.5rem 1rem;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.clear-btn:hover {
  background: #c0392b;
}
</style>
